<!-- 家政公司 -->
<template>
	<view class="company">
		<!-- banner区 -->
		<view class="house_banner">
			<swiper
				class="swiper"
				:duration="duration"
				:autoplay="true"
				:circular="true"
				style="height: 100%;"
				:indicator-dots="true"
				indicator-color="#585e65"
				indicator-active-color="#a3aab2"
			>
				<!-- <swiper-item v-for="item in 4" :key="item"> -->
				<swiper-item>
					<image :src="detail.image_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<!-- 标题介绍 -->
			<view class="list1">
				<view class="title">{{detail.name}}</view>
				<view class="addres">
					<text>{{detail.province_name}}{{detail.city_name}}{{detail.area_name}}{{detail.address}}</text>
					<image src="https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/jia_dizhi.png" mode=""></image>
				</view>
				<view class="phone">
					<text>{{detail.create_time}} 发布</text>
					<image src="https://community.chuangxiangdianli.com/images/neighborimg/housekeeping/jia_phone.png" mode=""></image>
				</view>
			</view>
			<!-- 占位 -->
			<view class="clear"></view>
			<!-- 基本介绍 -->
			<view class="list2">
				<view class="title">基本介绍</view>
				<view class="base_">
					{{detail.content}}
				</view>
				<!-- <view class="advantage">
					<view class="content_left">商家优势</view>
					<view class="content_right">
						<view>1、评分高于93%商家</view>
						<view>2、30天无投诉</view>
						<view>3、商家加入平台超过200天</view>
					</view>
				</view>
				<view class="project">
					<view class="content_title">服务项目</view>
					<view class="content_item">
						<view>钟点工、家庭全方位家政</view>
						<view>木地板、是材料打蜡抛光</view>
						<view>地毯清洁、杀菌处理</view>
						<view>家居养护、窗帘清洗、壁纸清洁</view>
					</view>
				</view> -->
			</view>
			<!-- 服务项目 暂时不用 -->
			<!-- <view class="list3">
				<view class="content_item">
					<view class="left"><image src="https://community.chuangxiangdianli.com/images/neighborimg/z_tr@2x.png" mode=""></image></view>
					<view class="right">
						<view class="title">日常保洁</view>
						<view class="describe">提供家庭室内表面清洁服务</view>
						<view class="bottom">
							<view class="price">￥800/小时</view>
							<view class="detail">查看详情</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
// 引入封装的请求
import request from '@/utils/request.js'
export default {
	data() {
		return {
			duration: 500,
			// 详情 
			detail:{}
		};
	},
	methods:{
		// 获取详情
		get_detail(id){
			let that = this
			request.get('Mini/other/getInfoDetail/1/'+id).then(res => {
				// console.log('首页数据', res)
				if (res.code==200) {
					this.detail = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}).catch(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			})
		}
	},
	onLoad(option) {
		let id = option.id
		this.get_detail(id)
	}
};
</script>

<style lang="scss">
.company {
	.house_banner {
		height: 560rpx;
	}
	.content {
		width: 100%;
		position: relative;
		.list1 {
			width: 100%;
			height: 270rpx;
			position: absolute;
			top: -140rpx;
			border-radius: 40rpx 40rpx 0px 0px;
			background-color: #fff;
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			border-bottom: 12rpx solid #f7f8f9;
			.title {
				width: 100%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
				padding: 20rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.addres,
			.phone {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0;
				text {
					width: 80%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #636363;
					line-height: 46rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				image {
					width: 20%;
					width: 35rpx;
					height: 39rpx;
				}
			}
		}
		.clear {
			height: 140rpx;
		}
		.list2 {
			width: 100%;
			height: 480rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			border-bottom: 12rpx solid #f7f8f9;
			.title {
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 20rpx;
			}
			.advantage {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: top;
				margin-bottom: 20rpx;
				.content_left {
					margin-right: 38rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}
				.content_right {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.project {
				.content_title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 10rpx;
				}
				.content_item {
					margin-top: 10rpx;
					view {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		.list3 {
			width: 100%;
			background-color: #fff;
			padding-bottom: 50rpx;
			.content_item {
				width: 100%;
				height: 273rpx;
				box-sizing: border-box;
				padding: 20rpx;
				padding-right: 40rpx;
				border-bottom: 12rpx solid #f7f8f9;
				display: flex;
				align-items: top;
				justify-content: space-between;
				.left {
					width: 30%;
					text-align: center;
					image {
						width: 204rpx;
						height: 204rpx;
					}
				}
				.right {
					width: 70%;
					box-sizing: border-box;
					padding-left: 40rpx;
					.title {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
						margin-bottom: 14rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.describe {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #636363;
						line-height: 46rpx;
						margin-bottom: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price {
							font-size: 38rpx;
							font-family: Arial;
							font-weight: bold;
							color: #ff6716;
							line-height: 46rpx;
						}
						.detail {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #636363;
							line-height: 46rpx;
						}
					}
				}
			}
		}
	}
}
</style>
